:root {
	--color-headline: #313244;
	--color-text: #45475a;
	--color-link: #773231;
	--color-link-visited: #944948;
	--color-link-hover: #831818;
	--color-bg: #f5e0dc;
	--color-accent0:  #f2d5cf;
	--color-accent1:  #f2cdcd;
	--color-accent2:  #eebebe;
	--font-title: "Permanent Marker";
}
html {
	background: var(--color-bg);
	color: var(--color-text);
}
body {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
	color: var(--color-headline);
	font-family: var(--font-title);
}

a {
	color: var(--color-link);
	transition: color 0.4s;
}
a:visited {
	color: var(--color-link-visited);
}
a:hover {
	color: var(--color-link-hover);
}

/* HEADER */

header {
	padding: 0.4rem;
	width: calc(100vw - 0.4rem * 2);
	position: relative;
	display: flex;
	flex-direction: row;
}
header::before {
	background-image: linear-gradient(315deg, var(--color-accent1), var(--color-accent2));
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
header::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
	z-index: -1;
	mask-image: var(--hex-pattern);
	mask-repeat: repeat;
	opacity: 0.2;
}

header #header-home {
	text-decoration: none;
	display: flex;
	align-items: center;
}
header #header-home img {
	width: 3rem;
	transform: translateY(-0.2rem);
}
header #header-home h1 {
	font-family: var(--font-title);
	padding: 0;
	margin: 0;
	font-size: 1.4rem;
}
@media (orientation: portrait) {
	header #header-home h1 {
		display: none;
	}
}

/* FOOTER */

footer {
	padding: 0 0.4rem;
	padding-top: 2rem;
	min-width: calc(100vw - 0.4rem * 2);
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
	margin-top: auto;
}
footer::before {
	background-image: linear-gradient(315deg, var(--color-accent1), var(--color-accent2));
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	clip-path: polygon(0% 2rem, 100% 0%, 100% 100%, 0% 100%);
}
footer::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
	z-index: -1;
	mask-image: var(--hex-pattern);
	mask-repeat: repeat;
	opacity: 0.2;
	clip-path: polygon(0% 2rem, 100% 0%, 100% 100%, 0% 100%);
}
footer nav h3 {
	margin-bottom: 0;
}
footer nav ul {
	margin: 0;
	padding: 0.4rem;
}
footer nav ul li a {
	color: var(--color-text) !important;
	text-decoration: none;
	transition: color .4s;
}
footer nav ul li:hover a {
	color: var(--color-headline) !important;
}

/* ELEMENTS */

.card {
	border-radius: 0.4rem;
	background: var(--color-accent0);
	padding: 0.8rem;
	text-decoration: none;
	color: var(--color-text) !important;
	transition: background .4s;
}
.card:hover {
	background: var(--color-accent1);
}
.card article {
	display: flex;
	flex-direction: column;
}
.card article h2 {
	padding: 0;
	margin: 0;
}
.card article p {
	padding: 0;
	margin: 0;
	margin-top: 0.4rem;
}

div.highlight > pre {
	padding: 0.4rem;
	border-radius: 0.4rem;
	overflow-x: auto;
}

nav.language-select li.active a {
	color: var(--color-headline) !important;
}

nav.quickaccess-menu ul {
	/* get rid of list base theme */
	list-style: none;
	padding: 0;
	margin: 0;
	/*style element as button row / colum*/
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.4rem;
}

nav.quickaccess-menu ul li {
	padding: 0.4rem;
	border-radius: 0.4rem;
	border: 2px solid var(--color-headline);
	background-image: linear-gradient(transparent 50%, var(--color-headline) 50%, var(--color-headline) 100%);
	background-size: 100% 400%;
	background-position: 0 25%;
	transition: background-position .15s ease-in-out, color .15s;
	color: var(--color-headline) !important;;
}
nav.quickaccess-menu ul li:hover {
	background-position: 0 75%;
	color: var(--color-bg) !important;
}
nav.quickaccess-menu ul li a {
	text-decoration: none;
	color: inherit !important;
}